<template>
    <div class="promoteBusinessListComponent" v-if="oItem" :style="{
        paddingLeft: oItem.main.wrapperLr+'px',
        paddingRight: oItem.main.wrapperLr+'px',
        paddingTop: oItem.main.wrapperMt+'px',
        paddingBottom: oItem.main.wrapperMb+'px',
    }">
        <div class="content" :style="{
            backgroundColor:oItem.main.wrapperBgColor||'transparent', 
            backgroundImage:'url('+oItem.main.wrapperBgImg+')',
            borderTopLeftRadius: oItem.main.wrapperBRTopLr+'px',
            borderTopRightRadius: oItem.main.wrapperBRTopLr+'px',
            borderBottomLeftRadius: oItem.main.wrapperBRBottomLr+'px',
            borderBottomRightRadius: oItem.main.wrapperBRBottomLr+'px',
            paddingLeft: oItem.main.moduleLr+'px',
            paddingRight: oItem.main.moduleLr+'px',
            paddingTop: oItem.main.moduleMt+'px',
            paddingBottom: oItem.main.moduleMb+'px',
        }">

            <div class="head" :class="oItem.main.navBgColor?'hasBgColor':''" :style="{
                backgroundColor:oItem.main.navBgColor||'transparent',
                backgroundImage:'url('+oItem.main.navBgImg+')',
                borderTopLeftRadius: oItem.main.moduleBRTopLr+'px',
                borderTopRightRadius: oItem.main.moduleBRTopLr+'px',
                borderBottomLeftRadius: oItem.main.moduleBRBottomLr+'px',
                borderBottomRightRadius: oItem.main.moduleBRBottomLr+'px',
            }">
                <div class="box">
                    <div class="section">
                        <ul :style="{marginLeft:marginLeft+'px', width: heads.length*120+'px'}">
                            <li v-for="(h,index) in heads" :key="h.id" :class="h.active" :style="{
                                color:h.active=='on'?(oItem.main.navHighLightFontColor||'transparent'):(oItem.main.navFontColor||'transparent'),
                                fontSize: oItem.main.navFontSize+'px',
                                }" @click="switchThis(index)">{{ h.name }}</li>
                        </ul>
                    </div>
                </div>
                <div class="line" :style="{left:lineLeft+'px'}">
                    <span :style="{backgroundColor:oItem.main.navHighLightFontColor||'transparent'}"></span>
                    <i v-if="oItem.main.moduleBgColor" :style="{
                        borderBottomColor: oItem.main.moduleBgColor
                    }"></i>
                </div>
            </div>
            <div class="body" :class="oItem.main.moduleBgColor?'hasBgColor':''" :style="{
                backgroundColor:oItem.main.moduleBgColor||'transparent', 
                backgroundImage:'url('+oItem.main.moduleBgImg+')',
                borderTopLeftRadius: oItem.main.moduleBRTopLr+'px',
                borderTopRightRadius: oItem.main.moduleBRTopLr+'px',
                borderBottomLeftRadius: oItem.main.moduleBRBottomLr+'px',
                borderBottomRightRadius: oItem.main.moduleBRBottomLr+'px',
            }">
                <el-carousel :autoplay="false" :loop="false" ref="carousel" @change="carouselOnChange">
                    <el-carousel-item v-for="h in heads" :key="h.id">
                        <p style="display:flex;align-items:center; justify-content:center;">
                            <span :style="{
                                color: oItem.main.moduleTitleFontColor||'transparent',
                                fontSize: oItem.main.moduleTitleFontSize+'px'
                            }">淘宝邀请码：</span>
                            <span :style="{
                                color: oItem.main.moduleCodeFontColor||'transparent',
                                fontSize: oItem.main.moduleCodeFontSize+'px'
                            }">{{h.no}}</span></p>
                        <img :src="zhanye1" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
import zhanye1 from "@/static/images/zhanye1.jpg";
import zhanye2 from "@/static/images/zhanye2.jpg";
export default {
    name: "promoteBusinessListComponent",
    data() {
        return {
            oItem: null,
            heads: [
                { id: 1, name: "查看二维码", no: "45236870", active: "on" },
                { id: 2, name: "实时数据", no: "45236871", active: "" },
                { id: 3, name: "数据明细", no: "45236872", active: "" },
                { id: 4, name: "汇总数据", no: "45236873", active: "" },
                { id: 5, name: "展业数据", no: "45236874", active: "" },
            ],
            headsIndex: 0,
            oldheadsIndex: 0,
            zhanye1,
            zhanye2,
            marginLeft: 0,
            lineLeft: 0,

            swiper: null,

            swiperOption: {
                slidesPerView: 2,
                // 设置分页器
                pagination: {
                    el: ".swiper-pagination",
                    // 设置点击可切换
                    clickable: true,
                },
                // 设置前进后退按钮
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                // 设置自动轮播
                autoplay: {
                    delay: 5000, // 5秒切换一次
                },
                // 设置轮播可循环
                loop: false,
            },
        };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        const emitName = this.ename + this.id;
        Bus.$off(emitName);
        Bus.$on(emitName, (control) => {
            //console.log("announcementComponent被通知更新");
            this.oItem = null;
            this.$nextTick(() => {
                this.oItem = JSON.parse(control);
            });
        });
    },
    methods: {
        //页面初始化
        init() {
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.item));
        },
        switchThis(index) {
            this.headsIndex = index;
            this.heads.forEach((item) => {
                item.active = "";
            });
            this.heads[index].active = "on";
            const unit = 120;
            //当点击的是3个按钮，及之后的按钮时，保存被选中项在导航中间
            switch (index) {
                case 0: //查看二维码
                    this.lineLeft = 0;
                    this.marginLeft = 0;
                    break;
                case 1: //实时数据
                    if (this.marginLeft == 0) {
                        this.lineLeft = unit;
                    } else if (this.marginLeft == -unit) {
                        this.marginLeft = 0;
                        this.lineLeft = unit;
                    }
                    break;
                case 2: //数据明细
                    if (this.marginLeft == 0) {
                        this.marginLeft = -unit;
                        this.lineLeft = unit;
                    } else if (this.marginLeft == -unit) {
                        this.lineLeft = unit;
                    } else if (this.marginLeft == -2*unit) {
                        this.marginLeft = -unit;
                        this.lineLeft = unit;
                    }
                    break;
                case 3: //汇总数据
                    if (this.marginLeft == 0) {
                        this.marginLeft = -unit;
                        this.lineLeft = 2*unit;
                    } else if (this.marginLeft == -unit) {
                        this.lineLeft = 2*unit;
                    } else if (this.marginLeft == -2*unit) {
                        this.lineLeft = unit;
                    }
                    break;
                case 4: //展业数据
                    if (this.marginLeft == -unit) {
                        this.marginLeft = -2*unit;
                        this.lineLeft = 2*unit;
                    } else if (this.marginLeft == -2*unit) {
                        this.lineLeft = 2*unit;
                    }
                    break;
            }

            this.$refs.carousel.setActiveItem(index);
        },
        //左右滑动走马灯组件
        carouselOnChange(e) {
            this.switchThis(e);
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.promoteBusinessListComponent {box-sizing: border-box; overflow: hidden;
    .content {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        box-sizing: border-box;
        overflow: hidden;
        .head {
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;
            display: flex;
            margin-bottom:30px;
            position: relative;
            &.hasBgColor{box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
                -3px -3px 3px #eee;}
            .box {
                display: flex;
                overflow: hidden;
                width: 100%;
                .section {
                    width: 300%;
                    ul {
                        display: flex;
                        
                        transition: all 0.3s;
                        li {
                            width: 120px;
                            height: 60px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            user-select: none;
                            cursor: pointer;
                            transition: all 0.3s;
                            &.on {
                                color: #f95656;
                            }
                        }
                    }
                }
            }

            .line {
                position: absolute;
                left: 0;
                bottom: 8px;
                z-index: 2;
                width: 120px;
                display: flex;
                justify-content: center;
                transition: all 0.3s;
                span {
                    width: 20px;
                    height: 2px;
                    background-color: red;
                    border-radius: 20px;
                }
                i {
                    width: 0;
                    height: 0;
                    display: block;
                    border-bottom: 15px solid #fff;
                    border-left: 15px solid transparent;
                    border-right: 15px solid transparent;
                    position: absolute;
                    left: 50%;
                    bottom: -40px;
                    transform: translateX(-50%);
                    filter: drop-shadow(-3px -3px 3px #ddd);
                }
            }
        }
        .body {
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;
            &.hasBgColor{
                box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
                -3px -3px 3px #eee;
            }
            .el-carousel {
                p {
                    display: block;
                    text-align: center;
                    height: 80px;
                    line-height: 80px;
                }
                img {
                    width: 50%;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                }
            }
        }
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    
}
</style>

<style lang="scss">
.promoteBusinessListComponent {
    .el-carousel__indicators{display: none;}
}
</style>
